<template>
  <div>
    <el-row :gutter="12">
      <el-col :span="4">
        <el-card shadow="always">
          <div class="text item biaoti">
            卡总数
          </div>
          <div class="text item">
            <span class="agentnum" v-if="homeNumberInfo.cardCount">{{homeNumberInfo.cardCount}} 张</span>
            <span class="agentnum" v-else>0 张</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always">
          <div class="text item biaoti">
            本月新增
          </div>
          <div class="text item">
            <span class="agentnum" v-if="homeNumberInfo.monthNewCardCount">{{homeNumberInfo.monthNewCardCount}} 张</span>
            <span class="agentnum" v-else>0 张</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always">
          <div class="text item biaoti">
            本月数据用量
          </div>
          <div class="text item">
            <span class="agentnum" v-if="homeNumberInfo.flowSum">{{homeNumberInfo.flowSum}} GB</span>
            <span class="agentnum" v-else>0 GB</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always">
          <div class="text item biaoti">
            激活总量
          </div>
          <div class="text item">
            <span class="agentnum" v-if="homeNumberInfo.activeCount">{{homeNumberInfo.activeCount}} 张</span>
            <span class="agentnum" v-else>0 张</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always">
          <div class="text item biaoti">
            本月激活总量
          </div>
          <div class="text item">
            <span class="agentnum" v-if="homeNumberInfo.monthActiveCount">{{homeNumberInfo.monthActiveCount}} 张</span>
            <span class="agentnum" v-else>0 张</span>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4">
        <el-card shadow="always">
          <div class="text item biaoti">
            可用短信数量
          </div>
          <div class="text item">
            <span class="agentnum" v-if="usableMessages">{{usableMessages}} 条</span>
            <span class="agentnum" v-else>0 条</span>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="space-around">
      <el-col :span="6"><span class="grid-content">移动</span> {{homeNumberInfo.CardCount1}}</el-col>
      <el-col :span="6"><span class="grid-content">电信</span> {{homeNumberInfo.CardCount2}}</el-col>
      <el-col :span="6"><span class="grid-content">联通</span> {{homeNumberInfo.CardCount3}}</el-col>
    </el-row>

    <div style="display: flex">
      <ve-ring :data="chartData" :settings="chartSettings" class="agentname"></ve-ring>
      <ve-ring :data="chartData1" :settings="chartSettings1" class="agentname"></ve-ring>
      <ve-ring :data="chartData2" :settings="chartSettings2" class="agentname"></ve-ring>
    </div>

    <el-row :gutter="24">
      <el-col :span="16">
        <span class="moneyopa">流量使用情况<span style="color: #999; font-size: 14px">(单位：GB)</span> ：</span>
        <el-button :type="homeflowNumberType==='DAY'?'primary':''" size="small" @click="homeflowNumberChange('DAY')" >按日</el-button>
        <el-button :type="homeflowNumberType==='MONTH'?'primary':''" size="small" @click="homeflowNumberChange('MONTH')" >按月</el-button>
        <el-select v-model="value" placeholder="请选择" multiple :multiple-limit="5" @change="changePassage" style="margin-left: 20px;width: 520px" v-if="options.length>0">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="8">
        <span class="moneyopa">
          <span v-if="homeflowNumberType==='DAY'">本月</span>
          <span v-if="homeflowNumberType==='MONTH'">本年</span>内使用流量排名
        </span>
      </el-col>
    </el-row>
    <div :style="{'display': 'flex','justify-content': chartData4.rows.length>0?'space-around':'flex-end'}">
      <ve-line :data="chartData4" class="agentmoney" style="width: 60%" v-if="chartData4.rows.length>0"></ve-line>
      <div class="text item">
        <el-table

          class="tableBox"
          :data="tableData"
          highlight-current-row
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="80"
            align="center">
          </el-table-column>
          <el-table-column
            property="iccid"
            label="iccid"
            width="260"
            align="center">
          </el-table-column>
          <el-table-column
            property="sumUsedFlow"
            label="期间内使用流量(GB)"
            width="180"
            align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-row :gutter="20">
      <el-col :span="16">
        <span class="moneyopa">财务详情统计：</span>
        <el-button :type="homeProfitNumberType==='DAY'?'primary':''" size="small" @click="homeProfitNumberChange('DAY')" >按日</el-button>
        <el-button :type="homeProfitNumberType==='MONTH'?'primary':''" size="small" @click="homeProfitNumberChange('MONTH')" >按月</el-button>
      </el-col>
      <el-col :span="8"><span class="moneyopa"><span v-if="homeProfitNumberType==='DAY'">本月</span><span  v-if="homeProfitNumberType==='MONTH'">本年</span>利润详情统计</span></el-col>
    </el-row>
    <div :style="{'display': 'flex','justify-content': chartData3.rows.length>0?'space-around':'flex-end'}">
      <ve-line :data="chartData3" :settings="chartSettings3" class="agentmoney" style="width: 60%" v-loading="chart3Loading" v-if="chartData3.rows.length>0"></ve-line>
      <div class="text item">
        <el-table
          :data="tableData1"
          v-loading="loading"

          class="tableBox"
          highlight-current-row
          style="width: 100%">
          <el-table-column
            type="index"
            label="序号"
            width="55"
            height="10"
            align="center">
          </el-table-column>
          <el-table-column
            property="agentName"
            label="代理"
            width="160"
            align="center">
          </el-table-column>
          <el-table-column
            property="cardCount"
            label="卡总数"
            width="140"
            align="center">
          </el-table-column>
          <el-table-column
            property="profitForAgentSum"
            label="利润"
            width="160"
            align="center">
          </el-table-column>
        </el-table>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    getHomeNumber,// 查询首页数据
    getHomeflowNumber,// 流量使用情况
    getHomeProfitNumber,//财务详情统计
    getUsableCount,// oem查询可用短信数量的接口
  } from '@/api/getData'

  export default {
    name: 'oemView',
    data() {
      this.chartSettings = {
        dimension: '卡状态',
        metrics: '总量',
        radius: [70, 100]
      },
        this.chartSettings1 = {
          dimension: '卡状态',
          metrics: '总量',
          radius: [70, 100]
        },
        this.chartSettings2 = {
          dimension: '卡状态',
          metrics: '总量',
          radius: [70, 100]
        },
        this.chartSettings3 = {
          metrics: ['总收入', '总返佣', '总利润'],
          dimension: ['日期'],
          // itemStyle:{'color':'#5ab1ef'},
        }
      return {
        usableMessages: '--',
        homeflowNumberType: 'DAY',
        homeProfitNumberType: 'DAY',
        homeNumberInfo: {
          cardNumber: '--',
          thisMonthNewCardNumber: '--',
          thisMonthCardFlow: '--',
          allActiveCount: '--',
          thisMonthActiveCount: '--',
          CardCount1: '--',
          CardCount2: '--',
          CardCount3: '--',
        },
        form: {
          name: '',
          phone: '',
          dynamicItem: [{
            name: '',
            phone: ''
          }]
        },
        formRules: {
          name: [{required: true, message: '请输入姓名', trigger: 'blur'}],
          phone: [
            {required: true, message: '请输入手机号', trigger: 'blur'},
            {pattern: /^1[34578]\d{9}$/, message: '目前只支持中国大陆的手机号码'}
          ]
        },
        chartData: {
          columns: ['卡状态', '总量'],
          rows: [
            { '卡状态': '已激活', '总量': 0},
            { '卡状态': '去激活', '总量': 0},
            { '卡状态': '已停机', '总量': 0}
          ]
        },
        chartData1: {
          columns: ['卡状态', '总量'],
          rows: [
            {'卡状态': '已激活', '总量': 0},
            {'卡状态': '去激活', '总量': 0},
            {'卡状态': '已停机', '总量': 0}
          ]
        },
        chartData2: {
          columns: ['卡状态', '总量'],
          rows: [
            {'卡状态': '已激活', '总量': 0},
            {'卡状态': '去激活', '总量': 0},
            {'卡状态': '已停机', '总量': 0}
          ]
        },
        chart3Loading: false,
        chartData3: {
          columns: ['日期', '总收入', '总返佣', '总利润'],
          rows: []
        },
        tableData: [],
        tableData1: [],
        currentRow: null,
        chartData4: {
          columns: ['日期', ],
          rows: []
        },
        options: [],
        value: [],
        flowAccount: [],
        flowDate: [],
        chooseList: [],
        loading: false,
      }

    },
    created() {
      this.initData()
    },
    methods: {
      initData() {
        this.houmeNumber();
        this.homeProfitNumber();
        this.homeflowNumber();
        this.usableCount();
      },
      // 查询首页数据
      async houmeNumber(theKey) {
        const returnData = await getHomeNumber({}, {
          obj: this,
          key: 'tableLoading;' + theKey
        });
        this.homeNumberInfo = returnData.data;

        let chartItem = JSON.parse(returnData.data.operatorLine);
        if(chartItem!==null){
          if(chartItem.CARDMOBILE){
            this.homeNumberInfo.CardCount1 = chartItem.CARDMOBILE.CardCount;
            this.chartData.rows[0]['总量'] = chartItem.CARDMOBILE.ACTIVATE;
            this.chartData.rows[1]['总量'] = chartItem.CARDMOBILE.DEACTIVATED;
            this.chartData.rows[2]['总量'] = chartItem.CARDMOBILE.PAUSE;
          }
          if(chartItem.CARDTELECOM){
            this.homeNumberInfo.CardCount2 = chartItem.CARDTELECOM.CardCount;
            this.chartData1.rows[0]['总量'] = chartItem.CARDTELECOM.ACTIVATE;
            this.chartData1.rows[1]['总量'] = chartItem.CARDTELECOM.DEACTIVATED;
            this.chartData1.rows[2]['总量'] = chartItem.CARDTELECOM.PAUSE;
          }
          if(chartItem.CARDUNICOM){
            this.homeNumberInfo.CardCount3 = chartItem.CARDUNICOM.CardCount;
            this.chartData2.rows[0]['总量'] = chartItem.CARDUNICOM.ACTIVATE;
            this.chartData2.rows[1]['总量'] = chartItem.CARDUNICOM.DEACTIVATED;
            this.chartData2.rows[2]['总量'] = chartItem.CARDUNICOM.PAUSE;
          }
        }

      },
      homeflowNumberChange(type) {
        this.homeflowNumberType = type;
        this.homeflowNumber()
      },
      async homeflowNumber(dateType, theKey) {
        const returnData = await getHomeflowNumber({
          dictType: this.homeflowNumberType
        }, {
          obj: this,
          key: 'tableLoading;' + theKey
        });
        if(returnData._result){
          // this.tableData = new Array(...JSON.parse(returnData.data.flowRank));
          //表格数据
          let list = JSON.parse(returnData.data.flowRank);
          if(list.length>0){
            for(let item of list){
              let obj = {};
              obj.iccid = item.iccid;
              let flow = this.$MToGB.exe(item.sumUsedFlow);
              obj.sumUsedFlow = flow;
              this.tableData.push(obj)
            }
          }
          this.flowDate = [];
          if(JSON.parse(returnData.data.accountFlowLine)&&JSON.parse(returnData.data.accountFlowLine).dateList){
            this.flowDate = JSON.parse(returnData.data.accountFlowLine).dateList;
          }
          this.flowAccount = [];
          if(JSON.parse(returnData.data.accountFlowLine)&&JSON.parse(returnData.data.accountFlowLine).lineDateVOList){
            this.flowAccount = JSON.parse(returnData.data.accountFlowLine).lineDateVOList;

            this.options = [];
            this.flowAccount.forEach((item,index)=>{
              let obj = {};
              obj.label = item.name;
              obj.value = index + 1;
              this.options.push(obj);
            });
          }

          if(this.chooseList.length===0 && this.options.length>0){
            this.value = [1];
            let row = this.flowAccount[0];
            this.chooseList[0] = this.flowAccount[0];
            this.chartData4.columns = ['日期',row.name];
          }
          else if(this.chooseList.length>0 && this.options.length>0){
            this.chooseList = [];
            for(let i of this.value){
              let flow = this.$MToGB.exe(this.flowAccount[i-1]);
              this.chooseList.push(flow)
            }
          }

          this.chartData4.rows =[];
          this.flowDate.map((item, index) => {
            let data = {};
            if(this.homeflowNumberType==='DAY'){
              data['日期'] = item.substring(5,10);
            }
            else{
              data['日期'] = item
            }

            for (let row of this.chooseList) {
              data[row.name] = 0;
              if (row.data.length > 0) {
                let flow = this.$MToGB.exe(row.data[index])
                data[row.name] = flow;

              }
            }
            this.chartData4.rows.push(data)
          });
        }
      },
      changePassage(val){
        this.value = val;
        this.chooseList = [];
        this.chartData4.columns = ['日期'];
        for(let item of val){
          this.chooseList.push(this.flowAccount[item-1]);
          this.chartData4.columns.push(this.flowAccount[item-1].name)
        }
        this.chartData4.rows =[];
        this.flowDate.map((item, index) => {
          let data = {};
          data['日期'] = item
          if (this.homeflowNumberType === 'DAY') {
            data['日期'] = item.substring(5, 10);
          }
          for (let row of this.chooseList) {
            data[row.name] = 0;
            if (row.data.length > 0) {
              data[row.name] = row.data[index];
            }
          }
          this.chartData4.rows.push(data)
        })

      },

      homeProfitNumberChange(type) {
        // },
        this.homeProfitNumberType = type;
        this.homeProfitNumber()
      },
      async homeProfitNumber(dateType, theKey) {
        let _this = this;
        this.loading = true;
        this.chart3Loading = true;
        //财务详情统计
        const returnData = await getHomeProfitNumber({
          dateType: this.homeProfitNumberType
        },{
          obj: this,
          key: 'tableLoading;' + theKey
        });
        if(returnData._result){
          let list = [];
          if(this.homeProfitNumberType==='DAY'){
            _this.tableData1 = JSON.parse(returnData.data.profitRankMonth);
            list = JSON.parse(returnData.data.amountLineDay);
          }
          else if(this.homeProfitNumberType==='MONTH'){
            _this.tableData1 = JSON.parse(returnData.data.profitRankYear);
            list = JSON.parse(returnData.data.amountLineMonth);
          }

          if (list!==null&&list.dateList.length>0) {
            this.chartData3.rows = [];
            list.dateList.map((item, index) => {
              let data = {};
              if(this.homeProfitNumberType==='DAY'){
                data['日期'] = item.substring(5,10);
              }
              else{
                data['日期'] = item
              }
              data['总收入'] = list.lineDateVOList[0].data[index];
              data['总返佣'] = list.lineDateVOList[1].data[index];
              data['总利润'] = list.lineDateVOList[2].data[index];
              this.chartData3.rows.push(data);
              this.chart3Loading = false;
              this.loading = false;
            })
          } else {
            this.chart3Loading = false;
            this.loading = false
          }
        }
      },
      async usableCount() {
        let returnData = await getUsableCount({})
        if (returnData._result) {
          this.usableMessages = returnData.data
        }
      }
    }
  }
</script>

<style scoped>
  .biaoti {
    margin-bottom: 10px;
  }

  .agentnum {
    font-size: 24px;
    font-weight: bold;
    margin-right: 10px;
  }

  .item {
    color: #606266;
  }

  .agentname {
    flex: 1;
  }

  .grid-content {
    font-weight: bold;
    font-size: x-large;
  }

  .row-bg {
    color: #606266;
    margin-top: 50px;
  }
/*
  .agentmoney {
    width: 45%;
  }*/

  .moneyopa {
    font-weight: bold;
    margin-bottom: 10px;
    color: #303133;
  }

  .moneyopa1 {
    color: #303133;
    font-family: 微软雅黑;
    font-weight: bold;
    font-size: 15px;
  }

  .row-bg1 {
    margin-top: 12px;
  }

  .block {
    margin-top: 12px;
    text-align: right;
  }

  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

</style>
